<template>
  <div class="app-container">
    <el-card shadow="never" class="mb20">
      <div slot="header" class="clearfix" style="text-align: center;">
        <el-button type="text" @click="() => {
          this.$router.go(-1)
          }" style="float: left;"> <i class="el-icon-d-arrow-left"></i>返回</el-button>
        <span style="font-size: 1.5em; font-weight: bold; text-align: center;">{{title}}</span>
      </div>
      <!--公示的时候不显示流程图和流程日志-->
      <ProcessForm
        v-if="publicity"
        ref="ProcessForm"
        :procdefId="procdefId"
        :processDeploymentId="deploymentId"
        :processInstanceId="processInstanceId"
        :formLayoutId="layoutId"
        :taskId="taskId"
        :notify="notify"
        :publicity="publicity"
        :readonly="readonly"
        @getProcessTitle="getProcessTitle"
      />
      <el-tabs v-else v-model="activeName" class="process-tabs" @tab-click="handleClick">
        <el-tab-pane label="表单信息" name="form">
          <div>
            <ProcessForm
              ref="ProcessForm"
              :procdefId="procdefId"
              :processDeploymentId="deploymentId"
              :processInstanceId="processInstanceId"
              :formLayoutId="layoutId"
              :taskId="taskId"
              :notify="notify"
              :publicity="publicity"
              :readonly="readonly"
              @getProcessTitle="getProcessTitle"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="流程图" name="diagram">
          <div class="tab-pane-content">
            <ProcessDiagram ref="diagram" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="流程日志" name="record">
          <ProcessRecords ref="ProcessRecords" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import ProcessForm from './components/ProcessForm'
import ProcessDiagram from './components/ProcessDiagram'
import ProcessRecords from '@/views/workflow/bpmn/components/ProcessRecords'
import { getQueryString } from '@/views/workflow/utils/generator/index'
import { getByKey } from '@/api/workflow/bpmn/deploy'

export default {
  components: {
    ProcessForm,
    ProcessDiagram,
    ProcessRecords
  },
  data() {
    return {
      procdefId: '',
      deploymentId: '',
      processPng: '', // 流程图
      processInstanceId: '',
      layoutId: '', // 查看哪一个布局（查看转发和公示的时候用到）
      taskId: '',
      notify: false, // 是否是查看转发
      publicity: false, // 是否是查看公示
      readonly: false,
      activeName: 'form',
      proInsName: '', // 流程实例名称
      processName: '' // 流程名称
    }
  },
  computed: {
    title() {
      return this.proInsName || this.processName
    }
  },
  async created() {
    this.procdefId = this.$route.query.procdefId
    this.deploymentId = this.$route.query.deploymentId
    this.processInstanceId = this.$route.query.processInstanceId
    this.layoutId = this.$route.query.layoutId
    this.taskId = this.$route.query.taskId
    this.notify = this.$route.query.notify
    this.publicity = this.$route.query.publicity
    this.readonly = this.$route.query.readonly == 1
    // 如果流程参数为空，则判断key是否为空，若不为空则通过key获取这些参数的值
    if ((!this.procdefId || !this.deploymentId) && !this.taskId && (!this.processInstanceId || !this.layoutId))  {
      await this.getProcessParamsByKey()
    }
    this.$nextTick(() => {
      this.$refs.ProcessForm.getNodeInfo()
    })
  },
  methods: {
    async getProcessParamsByKey() {
      const definitionKey = this.$route.query.definitionKey
      if (definitionKey) {
        const res = await getByKey(definitionKey)
        if (res && res.data) {
          this.procdefId = res.data.id
          this.deploymentId = res.data.deploymentId
        }
      }
    },
    handleClick(tab, event) {
      if (tab.name === 'form') {
        // 表单信息
      } else if (tab.name === 'diagram') {
        // 流程图
        this.$refs.diagram.getModel(this.procdefId, this.processInstanceId)
      } else if (tab.name === 'record') {
        // 流程日志
        if (this.processInstanceId) {
          this.$refs.ProcessRecords.queryHisTask(this.processInstanceId)
        }
      }
    },
    getProcessTitle(proInsName, processName) {
      this.proInsName = proInsName
      this.processName = processName
    }
  }
}
</script>

<style scoped>
.tab-pane-content {
  height: calc(100vh - 325px);
  overflow: auto;
}
  /* .process-tabs >>> .el-tabs__content {
    overflow: visible !important;
  } */
</style>
